import React, { useEffect, useState } from 'react'
import './Login.scss'
import { Popup, Swiper, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import Header from './Header'//导入header组件
import { AliwangwangFilled } from '@ant-design/icons';
import { LockOutline } from 'antd-mobile-icons'
import Ispass from './Ispass'//导入验证输入信息验证
import { Divider, Steps, Step, Button } from '@nutui/nutui-react'
import { getRightCode, Phonelogin, login } from '../../utils/request'//导入接口
export default function Login() {
    const navigate = useNavigate()
    let SwiperRef = React.useRef(null)
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [phone, setPhone] = useState('')
    const [code, setCode] = useState('')
    const [rightCode, setRightCode] = useState('')
    const [visible, setVisible] = useState(false)
    const [sms, setSms] = useState(false)
    let [countdown, setCountdown] = useState(60)
    const [val, setVal] = useState(0)
    const [isShow, setIsShow] = useState(false)
    //切换引导页
    const handleStep = () => {
        SwiperRef.current?.swipeNext()
        let newVal = val
        if (newVal <= 2) {
            newVal = newVal + 1
        }
        setVal(newVal)
    }
    //跳过引导页
    const skip = () => {
        localStorage.setItem('isNow', false)
        localStorage.setItem('skip', true)
        navigate('/app')
    }
    //取消引导页
    const isNow = (method) => {
        localStorage.setItem('isNow', false)
        if (method == 'login') {
            setVisible(false)
        } else {
            navigate('/register')
        }
    }
    //获取是否需要引导页
    useEffect(() => {
        if (localStorage.getItem('isNow') == 'false') {
            setVisible(false)
        } else {
            setVisible(true)
        }
    }, [])
    //登入
    const toLogin = async () => {
        const loginEnd = (res) => {
            Toast.show({
                icon: res.code == 200 ? 'success' : 'fail',
                content: res.msg,
            })
            if (res.code == 200) {
                localStorage.setItem('accessToken', res.accessToken)
                localStorage.setItem('refreshToken', res.refreshToken)
                localStorage.setItem('userId', res.user._id)
                navigate('/app')
            }
        }
        if (sms) {
            let reg = /^1[3-9]\d{9}$/
            if (!code || !phone || !rightCode) {
                Toast.show({
                    icon: 'fail',
                    content: '请填写完整信息',
                })
                return
            }
            if (phone.length != 11 || !reg.test(phone)) {
                Toast.show({
                    icon: 'fail',
                    content: '请输入正确的手机号',
                })
                return
            }
            if (code != rightCode) {
                Toast.show({
                    icon: 'fail',
                    content: '验证码不正确',
                })
                return
            }
            let res = await Phonelogin(phone)
            loginEnd(res)
            return
        }
        if (Ispass('login', email, password)) {
            let res = await login(email, password)
            loginEnd(res)
        }
    }
    //获取验证码
    const getCode = async () => {
        let reg = /^1[3-9]\d{9}$/
        if (phone.length != 11 || !reg.test(phone)) {
            Toast.show({
                icon: 'fail',
                content: '请输入手机号',
            })
            return
        }
        let res = await getRightCode(phone)
        if (res.state == 200) {
            setRightCode(res.code)
            setIsShow(true)
            let timer = setInterval(() => {
                if (countdown > 0) {
                    setCountdown(countdown--)
                } else {
                    setIsShow(false)
                    clearInterval(timer)
                    setCountdown(60)
                    setRightCode('')
                    setCode('')
                }
            }, [1000])
        }
    }
    return (
        <div className='login'>
            <Header H1_text={'欢迎回来'} P_text={<span>在此处输入您的账号或者<span onClick={skip} className='red'>去看主页</span></span>}></Header>
            <div className='login_box'>
                <div style={{ display: sms ? 'none' : 'block' }}>
                    <div className='login_box_item'>
                        <p>邮箱</p>
                        <input type="text" placeholder='这里请输入邮箱' value={email} onChange={(e) => { setEmail(e.target.value) }} />
                    </div>
                    <div className='login_box_item'>
                        <p>密码</p>
                        <input type="password" placeholder='这里请输入密码' value={password} onChange={(e) => { setPassword(e.target.value) }} />
                    </div>
                </div>
                <div style={{ display: sms ? 'block' : 'none' }}>
                    <div className='login_box_item'>
                        <p>手机号</p>
                        <input type="text" placeholder='这里请输入手机号' value={phone} onChange={(e) => { setPhone(e.target.value) }} />
                    </div>
                    <div className='login_box_item'>
                        <p>验证码</p>
                        <div className='login_code_box'>
                            <input type="text" placeholder='这里请输入验证码' value={code} onChange={(e) => { setCode(e.target.value) }} />
                            <button className='get_code' onClick={getCode} disabled={isShow}>
                                {isShow ? countdown + 's' : '获取验证码'}
                            </button>
                        </div>
                    </div>
                </div>
                <div className='login_box_forget'>
                    <span className='red' onClick={() => { navigate('/resetpassword') }}>忘记密码?</span>
                </div>
                <button className='login_btn' onClick={toLogin}>登入</button>
                <div>
                    <div className='login_other'>
                        <Divider>其他方式</Divider>
                    </div>
                    <div className='login_other_box'>
                        <LockOutline style={{ fontSize: '24px', color: !sms ? 'green' : '' }}
                            onClick={() => { setSms(false) }} />
                        <AliwangwangFilled style={{ fontSize: '24px', color: sms ? 'green' : '' }} onClick={() => { setSms(true) }} />
                    </div>
                    <div className='register_text'>
                        <span>还没有账号?</span>
                        <span className='red' onClick={() => { navigate('/register') }}>去注册</span>
                    </div>
                </div>
            </div>
            <Popup position='bottom' visible={visible} destroyOnClose>
                <Swiper ref={SwiperRef} indicator={false} index={val} allowTouchMove={false}>
                    <Swiper.Item>
                        <div className='contentFull'>
                            <span className='skip' onClick={() => { skip() }}>跳过</span>
                            <div className='contentFull_box'>
                                <img src="/steer1.png" alt="" />
                                <h1>得到你梦想的工作</h1>
                                <p>在我们的应用中的小工具中获取工作推荐，搜索和保存工作机会</p>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div className='contentFull'>
                            <span className='skip' onClick={() => { skip() }}>跳过</span>
                            <div className='contentFull_box'>
                                <img src="/steer2.png" alt="" />
                                <h1>方便在您随时方便使用</h1>
                                <p>在我们的应用中的小工具中获取工作推荐，搜索和保存工作机会</p>
                            </div>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div className='contentFull'>
                            <span className='skip' onClick={() => { skip() }}>跳过</span>
                            <div className='contentFull_box'>
                                <img src="/steer3.png" alt="" />
                                <h1>轻松管理简历</h1>
                                <p>在我们的应用中的小工具中获取工作推荐，搜索和保存工作机会</p>
                            </div>
                        </div>
                    </Swiper.Item>
                </Swiper>
                <Steps value={val} dot>
                    <Step value={0} />
                    <Step value={1} />
                    <Step value={2} />
                </Steps>
                <div style={{ margin: '10px 0 20px', textAlign: 'center' }}>
                    {
                        val < 2 ? <Button type="danger" onClick={() => handleStep()}>
                            下一步
                        </Button> : <div className='Login_flex'>
                            <Button type="danger" onClick={() => { isNow('login') }} shape='square' color='#FA7B55'>
                                登入
                            </Button>
                            <Button type="danger" onClick={() => { isNow('register') }} fill='outline' shape='square'>
                                注册
                            </Button>
                        </div>
                    }
                </div>
            </Popup>
        </div>
    )
}
